import { Kwidget } from "../kWidget";

class Kbutton extends Kwidget{
    constructor() {
        super();
        const shadowRoot = this.initShadow();
        this.btn = shadowRoot.querySelector('.k-button');
    }

    static get observedAttributes() {
        return ['status','type'];
    }

    connectedCallback() {
        this.logInfo('k-button挂载成功');
    }


    attributeChangedCallback(name, oldVal, newVal) {
        switch (name) { 
            case "status":
                this.setStatus(newVal);
                break;
            case "type":
                this.setType(newVal);
                break;
            default:
                break;
        }
    }

    setStatus(value) {
        this.btn.classList.add(`k-button-${value}`);
    }

    setType(value) {
        this.btn.style.setProperty("border-style", value);
    }

    get status() {
        return this.getAttribute('status') || 'primary';
    }
    set status(val) {
        this.setAttribute('status', val);
    }

    get type() {
        return this.getAttribute('type') || 'solid';
    }
    set type(val) {
        this.setAttribute('type', val);
    }

    html() {
        return` 
        <button class="k-button">
            <slot></slot>
        </button>`
    }

    css() {
        return `
            :host{
                
            }
            .k-button {
                height: 30px;
                font-size: var(--k-font-size);
                letter-spacing: var(--k-letter-spacing);
                outline: none;
                border: 1px solid var(--k-border-color);
                background-color: transparent;
                border-radius: var(--k-radius);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 18px;
                transition: background-color 0.5s ease-in-out;
                cursor: pointer;
            }
            .k-button-default {
                color: #fff;
                border: 1px solid var(--k-default-color-100);
            }
            .k-button-default:hover{
                border: 1px solid var(--k-default-color-50);
            }

            .k-button-primary {
                color: var(--k-primary-color-100);
                border: 1px solid var(--k-primary-color-100);
                background-color: var(--k-primary-color-20);
            }
            .k-button-primary:hover{
                background-color: var(--k-primary-color-50);
            }

            .k-button-success {
                color: var(--k-success-color-100);
                border: 1px solid var(--k-success-color-100);
                background-color: var(--k-success-color-20);
            }
            .k-button-success:hover{
                background-color: var(--k-success-color-50);
            }

            .k-button-warning {
                color: var(--k-warning-color-100);
                border: 1px solid var(--k-warning-color-100);
                background-color: var(--k-warning-color-20);
            }
            .k-button-warning:hover{
                background-color: var(--k-warning-color-50);
            }

            .k-button-danger {
                color: var(--k-danger-color-100);
                border: 1px solid var(--k-danger-color-100);
                background-color: var(--k-danger-color-20);
            }
            .k-button-danger:hover {
                background-color: var(--k-danger-color-50);
            }
        `
    }
}

Kwidget.defineCustomElement('k-button', Kbutton);

export { Kbutton };